<template>
	<view class="cost-container">
		<!-- 费用列表 -->
		<view class="cost-list">
			<view class="cost-item" v-for="(item, index) in costList" :key="index">
				<view class="cost-header">
					<text class="vehicle-number">{{item.licensePlate}}</text>
					<text class="cost-amount">¥{{item.cost}}</text>
				</view>
				<view class="cost-content">
					<view class="info-row">
						<text class="label">申请人：</text>
						<text class="value">{{item.applyName}}</text>
					</view>
					<view class="info-row">
						<text class="label">费用类型：</text>
						<text class="value">{{getCostTypeText(item.costType)}}</text>
					</view>
					<view class="info-row">
						<text class="label">申请时间：</text>
						<text class="value">{{item.applyTime}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="costList.length === 0">
			<image src="/static/empty.png" mode="aspectFit"></image>
			<text>暂无费用记录</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCostList } from '@/api/cost'

const costList = ref([])
const userId = uni.getStorageSync('userId')

// 获取费用类型文本
const getCostTypeText = (type) => {
	switch(type) {
		case 1: return '加油费'
		case 2: return '维修费'
		case 3: return '停车费'
		case 4: return '其他费用'
		default: return '未知类型'
	}
}

// 获取费用列表
const getCosts = async () => {
	try {
		const res = await getCostList(userId)
		if (res.code === 200) {
			costList.value = res.data
		} else {
			throw new Error(res.message || '获取费用列表失败')
		}
	} catch (error) {
		console.error('获取费用列表失败：', error)
		uni.showToast({
			title: error.message || '获取费用列表失败',
			icon: 'none'
		})
	}
}

// 下拉刷新
const onPullDownRefresh = async () => {
	try {
		await getCosts()
		uni.showToast({
			title: '刷新成功',
			icon: 'success'
		})
	} catch (error) {
		uni.showToast({
			title: '刷新失败',
			icon: 'none'
		})
	} finally {
		uni.stopPullDownRefresh()
	}
}

onMounted(() => {
	getCosts()
})

defineExpose({
	onPullDownRefresh
})
</script>

<style>
.cost-container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.cost-item {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.cost-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #eee;
}

.vehicle-number {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.cost-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #f5222d;
}

.cost-content {
	padding-top: 20rpx;
}

.info-row {
	display: flex;
	margin-bottom: 10rpx;
}

.info-row .label {
	width: 160rpx;
	color: #666;
	font-size: 28rpx;
}

.info-row .value {
	flex: 1;
	color: #333;
	font-size: 28rpx;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100rpx 0;
}

.empty-state image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-state text {
	color: #999;
	font-size: 28rpx;
}
</style>
